Blake Meike G. Blake Meike
Developer, Architect, Android Evangelist
blake.meike@gmail.com
twitter: @callmeike
blog: http://portabledroid.wordpress.com/
Let’s write some code!
The goal for the rest of this workshop is to port a small Jellybean application to use Material Design.
There are many ways to port a program.
Using the compatibility library, many Material features can be back ported to previous version of Android.
In this workshop, we will not attempt back-porting: The application will be Holo, pre-Lollipop and Materials on Lollipop.
As the first step in the port, let’s verify the development environment and enable basic Materials support.
Download the APIs
Set up an Emulator
Other handy things
Verify that HAXM mem bigger than emulator mem
Before starting the emulator, edit: hw.keyboard=no
CLI alias that kills and restarts the emulator
Clone Yamba 5, eclipse or Studio
Build it
Run it on your emulator
Set targetSdkVersion = 21
Add the v7:21 support library
compile 'com.android.support:appcompat-v7:21.0.0'
Define elevation policy
Choose primary, primary dark and accent colors
Correct style definitions
Use the -v21 resource qualifier where appropriate!
Next, let’s convert the Tweet View to look more Materialistic:
A card view with a floating button.
Use a FrameLayout to float the button (note, float the button to the top right, so that it doesn’t get covered by the keyboard)
Elevation (mid) the edit text
Test it
Fix the landscape layout
Make an image button (android:ic_input_add)
Fix the size
Correct margins to move it to the right place
Give it some elevation (mid)
Fix the color (android:tint)
Fix the shadow by giving it a background (use an oval shape resource)
Tune the image size (size, padding, filltype = scaleCenter)
The button should be disabled, when the text box does not contain a legal tweet.
Let’s Animate that, too!
Set the button invisible in the layout
In the code:
Get the button diameter (it should be set from a resource)
Set the button visible.
Animate! (ViewAnimationUtils.createCircularReveal)
That little something extra: a slight delay before the button disappears
Add a Handler
Send a delayed message to the Handler, to hide the button
The code now has a fairly serious bug…
Add an OnAttachStateChangeListener to the button
Only animate an attached (non-null) button.
The RecyclerView abstracts the implementation of the ListView
Let’s review…
No doubt, you have coded a ListView
Inflating views is expensive.
The ListView recycles old views, simply replacing content
findViewById can be expensive too…
Using the ViewHolder pattern reduces this expense
The Recycler View addresses many of these problems by separating recycler implementation from view layout, and the data adapter.
Implement a ViewHolder: probably an internal class
Implement, at least, the Adapter’s three abstract methods:
getItemCount
onCreateViewHolder
onBindViewHolder
An analog of SimpleCursorAdapter, for the RecyclerView
Check out how easy it is to handle clicks!
Add the support library (compile 'com.android.support:recyclerview-v7:+\')
Add the RecyclerView to a layout (android.support.v7.widget.RecyclerView)
From the code:
Get a handle to the RecyclerView
Set the layout manager
Set the adapter
Download the SimpleCursorRecyclerViewAdapter here: http://bit.ly/1wTfLKh
Add the support library (compile com.android.support:recyclerview-v7:+)
Create a new Fragment, LollypopTimelineFragment
Copy TimelineFragment
Replace explicit fragments in layout, with FrameLayout
From the activity, use the new fragment only if Lollypop
Create a layout for the new fragment, containing an android.support.v7.widget.RecyclerView
From the code, find and setup the RecyclerView
Use a LinearLayoutManager
Use a new instance of the SimpleCursorRecyclerViewAdapter i.. Set the adapter ViewBinder ii.. Set the adapter ItemClickListener
Stretch: make the rows card views
Use animation to show your user which elements are related
Consider the detail view:
Notice that it displays essentially the same information that is shown in the list item.
The transition from the list view, to the detail view, however, completely obscures that fact.
A perfect candidate for shared element transition animation
A shared element is a view (or set of views) that display the same content, in a new context.
Define a transition (a resource)
Enable it (a style)
Bind views to transition names the startActivity call (code)
There are a couple of built in transitions: fade, slide, explode.
Explore! Write new ones!
Transitions are part of the Activity style. The current style must enable transition:
<item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item>
... and then name it:
<item name="android:windowSharedElementEnterTransition">
@transition/transform_tweet_detail
</item>
Transition names are how views at the start of the transition are bound to the views at the end of the transition.
Pair.create(tweetView, "tweet")
works with:
<TextView
android:id="@+id/timeline_detail_tweet"
android:transitionName="tweet"
It will animate the view tweetView to the new view R.id.timeline_detail_tweet.
There is a new startActivity call:
startActivity(intent, bundle)
where the bundle contains the the transition animation.
ActivityOptions.makeSceneTransitionAnimation
Define the animation (a transition set with a single changeBounds)
Enable and name the transition, in the application style
In the detail layout, add transitionNames, one per animated value (there are 3)
Modify the ItemClickListener interface, to pass the clicked view
In onItemClicked, bind views to transitionTargets
Use ActivityOptions.makeSceneTransitionAnimation
Use findViewById to find sub view of the passed row, to bind
Use the new version of startActivity to start the Animation
Stretch: Make the Detail Activity into a materialistic card
You now have working code for several essential features of Lollipop:
In addition, you have a handy re-implementation of SimpleCursorAdapter, for use with the RecyclerView
And you built it yourself!
The slides and all of the code are available on GitHub:
https://github.com/bmeike/Yamba5Studio
blake.meike@gmail.com
twitter: @callmeike
blog: http://portabledroid.wordpress.com/
Watch for Addison Wesley’s Android Concurrency, Summer 2015
/
#